<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            display: inline-block;
            margin: 30px;
        }
        .th01{
            background-color: gray;
            text-align: center;
            color: #fff;
        }
        .calendar{
            width: 900px;
            margin: 20px auto;
        }
        .box{
            display: flex;
            align-content: baseline;
            flex-wrap: wrap;
        }
    </style>
</head>
<body>
    <script>
        var year=prompt('请输入年份',2023);
        var str="<h2 align='center'>"+year+"年年历</h2>";
        document.write(str);
        document.write(calendar(year));
        function calendar(year){
            var html="<div class='calendar'>";
            weekDay=new Date(year,0).getDay();// 周几？0~6,0代表周日
            for(var m=1;m<=12;m++){
                html+="<div class='box'>"
                html+="<table>"
                    html+="<tr class='th01'><td colspan='7'>"+year+"年"+m+"月</td></tr>";
                    html+="<tr><td>日</td>";
                    html+="<td>一</td>";
                    html+="<td>二</td>";
                    html+="<td>三</td>";
                    html+="<td>四</td>";
                    html+="<td>五</td>";
                    html+="<td>六</td></tr>";
                    //获取每个月的最后一天，date(year,month,0).getDate()来获取
                    dates=new Date(year,m,0).getDate();//当月天数,1~31
                    //argument,parameter
                    //循环
                    html+="<tr>";
                    for(date=1;date<=dates;date++){
                        //使用与截断进行判断，当月的第一天不为0
                        if(weekDay && date===1){
                            html+="<td colspan='"+weekDay+"'td></td>";
                        }
                        html+="<td>"+date+"</td>";
                        //判断是否需要换行？weekDay==6
                        if(weekDay==6 && date!=dates){
                            html+="</tr><tr>";
                        }else if(date==dates){
                            html+="</tr>";
                        }
                       weekDay = weekDay + 1 > 6 ? 0 : weekDay + 1;
                    }
                    if(m%4==1)html+="<br>";
                    
            }
            html+="</div>"
            return html;//用flex布局美化一下
        } 
    </script>
</body>
</html>